<template>
	<goods-sku-popup :value="value" @input="onChangeValue" border-radius="20" :localdata="goodsInfo" :mode="skuMode"
		:maskCloseAble="true" @open="openSkuPopup" @close="closeSkuPopup" @add-cart="addCart" @buy-now="buyNow"
		buyNowText="立即购买" />
</template>

<script>
	import {
		setCartTotalNum
	} from '@/core/app'
	import * as CartApi from '@/api/cart'
	import GoodsSkuPopup from '@/components/goods-sku-popup'

	export default {
		components: {
			GoodsSkuPopup
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			// true 组件显示 false 组件隐藏
			value: {
				Type: Boolean,
				default: false
			},
			// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
			skuMode: {
				type: Number,
				default: 1
			},
			// 商品详情信息
			goods: {
				type: Object,
				default: {}
			}
		},

		data() {
			return {
				goodsInfo: {}
			}
		},

		created() {
			const app = this
			const {
				goods
			} = app
			app.goodsInfo = {
				_id: goods.goods_id,
				name: goods.goods_name,
				goods_thumb: goods.goods_image,
				sku_list: app.getSkuList(),
				spec_list: app.getSpecList()
			}
		},

		methods: {

			// 监听组件显示隐藏
			onChangeValue(val) {
				this.$emit('input', val)
			},

			// 整理商品SKU列表
			getSkuList() {
				const app = this

				const {
					goods: {
						goods_id,
						goods_name,
						goods_image,
						sku_list
					}
				} = app
				const skuData = []
				for (var key in sku_list) {
					let item = sku_list[key]
					let spec_vids = item.spec_vids ? item.spec_vids.split('|') : []
					skuData.push({
						_id: item.sku_id,
						goods_sku_id: item.sku_id,
						goods_id: goods_id,
						goods_name: goods_name,
						image: item.image_url ? item.image_url : goods_image,
						price: item.goods_price * 100,
						stock: item.goods_number,
						spec_value_ids: spec_vids,
						sku_name_arr: app.getSkuNameArr(spec_vids)
					})
				}
				return skuData
			},

			// 获取sku记录的规格值列表
			getSkuNameArr(specValueIds) {
				const app = this
				const defaultData = ['默认']
				const skuNameArr = []
				if (specValueIds) {
					specValueIds.forEach((valueId, groupIndex) => {
						const specValueName = app.getSpecValueName(valueId, groupIndex)
						skuNameArr.push(specValueName)
					})
				}
				return skuNameArr.length ? skuNameArr : defaultData
			},

			// 获取指定的规格值名称
			getSpecValueName(valueId, groupIndex) {
				const app = this
				const {
					goods: {
						spec_list
					}
				} = app
				const res = spec_list[groupIndex].attr_values.find(specValue => {
					return specValue.attr_vid == valueId
				})
				return res.attr_value
			},

			// 整理规格数据
			getSpecList() {
				const {
					goods: {
						spec_list
					}
				} = this
				const defaultData = [{
					name: '默认',
					list: [{
						name: '默认'
					}]
				}]
				const specData = []
				spec_list.forEach(group => {
					const children = []
					group.attr_values.forEach(specValue => {
						children.push({
							name: specValue.attr_value
						})
					})
					specData.push({
						name: group.attr_name,
						list: children
					})
				})
				return specData.length ? specData : defaultData
			},

			// sku组件 开始-----------------------------------------------------------
			openSkuPopup() {
				// console.log("监听 - 打开sku组件")
			},

			closeSkuPopup() {
				// console.log("监听 - 关闭sku组件")
			},

			// 加入购物车按钮
			addCart(selectShop) {
				const app = this
				const {
					goods_id,
					goods_sku_id,
					buy_num
				} = selectShop
				CartApi.add(goods_id, goods_sku_id, buy_num)
					.then(result => {
						// 显示成功
						app.$toast(result.message)
						// 隐藏当前弹窗
						app.onChangeValue(false)
						// 购物车商品总数量
						const cartTotal = result.data.cart_total
						// 缓存购物车数量
						setCartTotalNum(cartTotal)
						// 传递给父级
						app.$emit('addCart', cartTotal)
					})
					.catch(err => err)
			},

			// 立即购买
			buyNow(selectShop) {
				
				CartApi.quickBuy(selectShop.goods_id, selectShop.goods_sku_id, selectShop.buy_num)
				  .then(result => {
						// 跳转到订单结算页
						this.$navTo('pages/checkout/index', {
							mode: 'buyNow',
							goodsId: selectShop.goods_id,
							goodsSkuId: selectShop.goods_sku_id,
							goodsNum: selectShop.buy_num
						})
						// 隐藏当前弹窗
						this.onChangeValue(false)
				  })
				  .catch(err => {
				    setTimeout(() => app.$toast(err.errMsg), 10)
				  })
				
			}

		}
	}
</script>

<style lang="scss" scoped>

</style>
